import { Link } from 'react-router-dom';
import { 
  ExternalLink, 
  Brain, 
  LineChart, 
  Database, 
  Code, 
  Boxes,
  Network,
  TrendingUp,
  Atom,
  Layers,
  Eye,
  ThumbsUp
} from 'lucide-react';
import { Tool } from '../types/tool';

const iconMap: Record<string, any> = {
  Brain,
  LineChart,
  Database,
  Code,
  Boxes,
  Network,
  TrendingUp,
  Atom,
  Layers,
};

interface ToolCardProps {
  tool: Tool;
}

export default function ToolCard({ tool }: ToolCardProps) {
  const IconComponent = iconMap[tool.icon] || Boxes;

  return (
    <div className="group bg-white rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 hover:border-primary-300">
      <div className="p-6">
        {/* 图标和标题 */}
        <div className="flex items-start justify-between mb-4">
          <div className="flex items-center space-x-3">
            <div className="p-3 bg-gradient-to-br from-primary-100 to-primary-50 rounded-lg group-hover:scale-110 transition-transform">
              <IconComponent className="w-6 h-6 text-primary-600" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-slate-800 group-hover:text-primary-700 transition-colors">
                {tool.name}
              </h3>
              {tool.version && (
                <span className="text-xs text-slate-500">v{tool.version}</span>
              )}
            </div>
          </div>
        </div>

        {/* 描述 */}
        <p className="text-slate-600 text-sm mb-4 line-clamp-2 min-h-[2.5rem]">
          {tool.description}
        </p>

        {/* 标签 */}
        <div className="flex flex-wrap gap-2 mb-4">
          {tool.tags.slice(0, 3).map((tag) => (
            <span
              key={tag}
              className="px-2 py-1 text-xs font-medium bg-slate-100 text-slate-700 rounded-full"
            >
              {tag}
            </span>
          ))}
        </div>

        {/* 统计信息 */}
        <div className="flex items-center space-x-4 mb-4 text-xs text-slate-500">
          <div className="flex items-center space-x-1">
            <Eye className="w-3.5 h-3.5" />
            <span>{tool.stats?.views || 0}</span>
          </div>
          <div className="flex items-center space-x-1">
            <ThumbsUp className="w-3.5 h-3.5" />
            <span>{tool.stats?.likes || 0}</span>
          </div>
        </div>

        {/* 底部操作 */}
        <div className="flex items-center justify-between pt-4 border-t border-slate-100">
          <div>
            {tool.authorInfo ? (
              <span className="text-xs text-slate-500">by {tool.authorInfo.owner}</span>
            ) : tool.author ? (
              <span className="text-xs text-slate-500">by {tool.author}</span>
            ) : null}
          </div>
          <Link
            to={`/tool/${tool.id}`}
            className="flex items-center space-x-1 text-primary-600 hover:text-primary-700 font-medium text-sm group/link"
          >
            <span>打开工具</span>
            <ExternalLink className="w-4 h-4 group-hover/link:translate-x-1 transition-transform" />
          </Link>
        </div>
      </div>
    </div>
  );
}

